<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>学生列表</title>
  <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <!-- Font Awesome 图标库 -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;
  }
  /* 新增头部样式 - 保持原有head.html内容不变 */
  .card-header {
    background-color: #2c3e50;
    height: 100px;
    color: white;
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  .card-header h2 {
    margin: 0;
    text-align: center;
    padding-left: 30px;
  }
  .card-header h4 {
    font-size: 1rem;
    margin: 0 10px 0 0;
  }
  .card-header img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
    margin: 5px;
  }
  .card-header a {
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
  }
  .card-header a:hover {
    background-color: rgba(255,255,255,0.1);
    text-decoration: none;
  }

  /* 调整容器样式以适应固定头部 */
  .container {
    display: flex;
    height: calc(100vh - 60px); /* 减去头部高度 */
    padding: 20px;
    box-sizing: border-box;
    margin-top: 10px; /* 为头部留出空间 */
  }
  .left {
    flex: 1;
    background-color: #2c3e50; /* 深蓝色背景 */
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-right: 20px;
    color: #ecf0f1; /* 浅色文字 */
  }
  .left h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 20px;
    color: #ffffff;
    text-align: center;
  }
  .left ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .left ul li {
    margin-bottom: 10px;
  }
  .left ul li a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: #ecf0f1;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .left ul li a:hover {
    background-color: #34495e; /* 悬停背景色 */
    color: #ffffff;
  }
  .left ul li a i {
    margin-right: 10px;
    font-size: 1.2rem;
  }
  .left ul li a.active {
    background-color: #1abc9c; /* 选中状态背景色 */
    color: #ffffff;
  }
  .right {
    flex: 4;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
  .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .table thead th {
    background-color: #34495e;
    color: #ffffff;
    padding: 12px;
    text-align: left;
  }
  .table tbody td {
    padding: 12px;
    border-bottom: 1px solid #e9ecef;
  }
  .table tbody tr:hover {
    background-color: #f1f1f1;
    transition: background-color 0.3s ease;
  }
  .table tbody tr:last-child td {
    border-bottom: none;
  }

</style>
<body>
<div class="row" th:replace="head.html"></div>
<div class="container">
  <div class="left">
    <h2>课程管理系统</h2>
    <div th:include="left.html"></div>
  </div>
  <div class="right">
    <button type="button" id="addStudentButton" class="btn btn-outline-primary" onclick="addCourse()" >新增课程</button>
    <table class="table table-striped">
      <thead>
      <tr>
        <th>id</th>
        <th>课程名</th>
        <th>教师名</th>
        <th>学生成绩</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="course:${courses}">
        <th th:text="${course.id}"></th>
        <td th:text="${course.name}"></td>
        <td th:text="${course.teacher.name}"></td>
        <td>
          <div th:each="studentScore:${course.scores}">
            <span th:text="${studentScore.student.name}"></span>
            <span th:text="${studentScore.score}"></span>
          </div>
        </td>
        <td>
          <a th:href="@{/Course/toEdit(id=${course.id})}">修改</a>
          <a th:href="@{/Course/remove(id=${course.id})}">删除</a>
        </td>
      </tr>
      </tbody>
    </table>
    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item"><a class="page-link" th:href="@{/Course/list/{currPage}/3(currPage=${currPage}-1)}">Previous</a></li>
        <li class="page-item"><a class="page-link" th:href="@{/Course/list/1/3}">1</a></li>
        <li class="page-item"><a class="page-link" th:href="@{/Course/list/2/3}">2</a></li>
        <li class="page-item"><a class="page-link" th:href="@{/Course/list/3/3}">3</a></li>
        <li class="page-item"><a class="page-link" th:href="@{/Course/list/{currPage}/3(currPage=${currPage}+1)}">Next</a></li>
      </ul>
    </nav>
  </div>
</div>
<script src="/bootstrap/js/jquery.min.js" crossorigin="anonymous"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script>
  function addCourse() {
    window.location.href = "/Course/toPage?page=addCourse";
  }
  // 获取按钮并绑定点击事件
  document.addEventListener("DOMContentLoaded", function() {
    var button = document.getElementById("addStudentButton");
    button.addEventListener("click", addCourse);
  });
</script>

</body>
</html>